<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>V-component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function() {
            var myapp = Vue.extend({
                template: '<h1>hello word</h1>'
            })
            Vue.component('hello', myapp);
            new Vue({
                el: '#root',
                data: {
                    flag:'my-adress',
                    flag2:'my-change1'
                },
                components:{
                    'my-adress':{
                        template:'#myadress',
                        data:function(){
                           return{
                             title:111
                           }
                        }
                    },
                    'my-tr':{
                        template:'#tr',

                    },
                    'my-slot':{
                        template:'#my-slot'
                    },
                    'my-change1':{
                        template:'<h1>{{x}}</h1>',
                        data:function(){
                            return {
                                x:Math.random()
                            }
                        }
                    },
                    'my-change2':{
                        template:'<h3>{{x}}</h3>',
                        data:function(){
                            return {
                                x:Math.random()
                            }
                        }
                    }

                }

            })
        }
    </script>
    <template id="myadress">
        <div>
            <p>{{title}}</p>
        </div>
    </template>
    <template id="tr">
        
        <tr>
            <td>111</td>
            <td>222</td>
        </tr>
     
    </template>
    <template id="my-slot">
        <div>
        <p>我是标题一</p>
        <slot name='s1'></slot>
        <p>我是标题二</p>
        <slot name='s2'></slot>
        </div>
    </template>
</head>

<body>

    <div id="root">
        <hello></hello>
        <my-adress></my-adress>
        <!-- 组件高级用法 -->
        <table border="1">
          <!--   <my-tr></my-tr> -->
          <tr is='my-tr'></tr>

        </table>
        <!-- 插槽 -->
        <my-slot>
            <ul slot="s1">
                <li>111</li>
                <li>222</li>
            </ul>
            <ul slot="s2">
                <li>333</li>
                <li>444</li>
            </ul>
        </my-slot>
        <!-- 动态组件 -->
        <button @click="flag='my-adress'">my-adress</button>
        <button @click="flag='hello'">hello</button>
        <component :is='flag'></component>
        <!-- 状态 -->
        <button @click="flag2='my-change1'">my-change1</button>
        <button @click="flag2='my-change2'">my-change2</button>
        <!-- 缓存非活动组件 -->
        <keep-alive>
            <component :is='flag2'></component>
        </keep-alive>
    </div>
</body>


</html>